<template>
    <div class="box-card mt15">
        <div class="card-header">
            <span>终端时钟</span>
        </div>
        <div class="box-content">
            <el-form ref="form" :model="formData" :rules="formRules" label-width="120px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="系统时间" prop="systemTime">
                            <el-date-picker v-model="formData.systemTime" type="datetime"
                                style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="设置时间" prop="setTime">
                            <el-date-picker v-model="formData.setTime" type="datetime"
                                style="width: 100%;"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-checkbox v-model="formData.syncTime" :true-label="1" :false-label="0">与计算机时间同步</el-checkbox>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">保 存</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, } from 'vue'

onMounted(() => { })

const form = ref(null)
const formData = ref({
    systemTime: '2023-12-07 18:16:17',
    setTime: '2023-12-07 18:16:17',
    syncTime: false,
});
const formRules = {
    systemTime: [{ required: true, message: '系统时间不能为空', trigger: 'change' }],
    setTime: [{ required: true, message: '设置时间不能为空', trigger: 'change' }],
};


const submitForm = () => {
    form.value.validate((valid: boolean) => {
        if (valid) {
            // 表单验证通过，可以进行提交操作
            // ...
        } else {
            // 表单验证不通过，进行错误处理
            return false;
        }
    });
};


</script>

<style scoped lang></style>